<template>
	<view class="login-container">
		<!-- 绿色头部区域 -->
		<view class="header-section"></view>
		
		<!-- 主要内容卡片 -->
		<view class="main-card">
			<!-- 标题和副标题 -->
			<view class="title-section">
				<text class="main-title">微信快捷登录</text>
				<text class="subtitle">使用微信账号登录,快速管理智能设备</text>
			</view>
			
			<!-- 微信图标 -->
			<view class="wechat-icon-section">
				<view class="wechat-icon">
					<text class="wechat-symbol">💬</text>
				</view>
			</view>
			
			<!-- 信息提示 -->
			<view class="info-text">
				<text>登录后将获取你的微信公开信息(昵称、头像等)</text>
			</view>
			
			<!-- 微信登录按钮 -->
			<view class="login-button-section">
				<button class="wechat-login-btn" @click="handleWechatLogin">
					<text class="btn-icon">💬</text>
					<text class="btn-text">微信快捷登录</text>
				</button>
			</view>
			
			<!-- 分割线和替代登录方式 -->
			<view class="divider-section">
				<view class="divider-line">
					<text class="divider-text">其他登录方式</text>
				</view>
			</view>
			
			<!-- 其他登录方式图标 -->
			<view class="other-login-section">
				<view class="other-login-item" @click="handlePhoneLogin">
					<view class="other-icon phone-icon">
						<text class="phone-symbol">📞</text>
					</view>
				</view>
				<view class="other-login-item" @click="handleAccountLogin">
					<view class="other-icon account-icon">
						<text class="account-symbol">👤</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 退出登录确认弹窗 -->
		<view class="modal-overlay" v-if="showLogoutModalVisible" @click="hideLogoutModal">
			<view class="modal-content" @click.stop>
				<view class="modal-icon">
					<text class="logout-icon">🚪</text>
				</view>
				<text class="modal-title">确认退出登录?</text>
				<text class="modal-desc">退出后将无法控制已连接的智能设备</text>
				<view class="modal-buttons">
					<button class="modal-btn cancel-btn" @click="hideLogoutModal">取消</button>
					<button class="modal-btn confirm-btn" @click="confirmLogout">确认退出</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showLogoutModalVisible: false // 控制退出登录弹窗显示
			}
		},
		onLoad() {
			// 页面加载时的初始化逻辑
			this.checkLoginStatus()
		},
		methods: {
			/**
			 * 检查登录状态
			 * 如果已登录则跳转到首页
			 */
			checkLoginStatus() {
				const token = uni.getStorageSync('tenant_token')
				if (token) {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}
			},
			
			/**
			 * 处理微信登录
			 * 调用微信登录API获取用户信息
			 */
			handleWechatLogin() {
				uni.showLoading({
					title: '登录中...'
				})
				
				// 调用微信登录
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						console.log('微信登录成功:', loginRes)
						// 这里应该调用后端API进行登录验证
						this.mockLoginSuccess()
					},
					fail: (err) => {
						console.error('微信登录失败:', err)
						uni.hideLoading()
						uni.showToast({
							title: '登录失败，请重试',
							icon: 'none'
						})
					}
				})
			},
			
			/**
			 * 模拟登录成功
			 * 实际项目中应该调用真实的后端API
			 */
			mockLoginSuccess() {
				setTimeout(() => {
					uni.hideLoading()
					// 模拟存储用户信息
					uni.setStorageSync('tenant_token', 'mock_token_123')
					uni.setStorageSync('user_info', {
						nickname: '张先生',
						avatar: '/static/logo.png',
						phone: '138****5678'
					})
					
					uni.showToast({
						title: '登录成功',
						icon: 'success'
					})
					
					// 跳转到首页
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
				}, 2000)
			},
			
			/**
			 * 处理手机号登录
			 */
			handlePhoneLogin() {
				uni.showToast({
					title: '手机号登录功能开发中',
					icon: 'none'
				})
			},
			
			/**
			 * 处理账号登录
			 */
			handleAccountLogin() {
				uni.showToast({
					title: '账号登录功能开发中',
					icon: 'none'
				})
			},
			
			/**
			 * 显示退出登录弹窗
			 */
			showLogoutModal() {
				this.showLogoutModalVisible = true
			},
			
			/**
			 * 隐藏退出登录弹窗
			 */
			hideLogoutModal() {
				this.showLogoutModalVisible = false
			},
			
			/**
			 * 确认退出登录
			 */
			confirmLogout() {
				uni.removeStorageSync('tenant_token')
				uni.removeStorageSync('user_info')
				this.hideLogoutModal()
				uni.showToast({
					title: '已退出登录',
					icon: 'success'
				})
			}
		}
	}
</script>

<style scoped>
	.login-container {
		width: 100%;
		height: 100vh;
		background-color: #f5f5f5;
		position: relative;
	}
	
	/* 绿色头部区域 */
	.header-section {
		width: 100%;
		height: 30vh;
		background-color: #3CC45F;
	}
	
	/* 主要内容卡片 */
	.main-card {
		position: absolute;
		top: 25vh;
		left: 20rpx;
		right: 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 60rpx 40rpx 40rpx;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	
	/* 标题区域 */
	.title-section {
		text-align: center;
		margin-bottom: 60rpx;
	}
	
	.main-title {
		display: block;
		font-size: 48rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
	}
	
	.subtitle {
		display: block;
		font-size: 28rpx;
		color: #666666;
	}
	
	/* 微信图标区域 */
	.wechat-icon-section {
		text-align: center;
		margin-bottom: 40rpx;
	}
	
	.wechat-icon {
		width: 120rpx;
		height: 120rpx;
		background-color: #E6F7EB;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
	}
	
	.wechat-symbol {
		font-size: 60rpx;
	}
	
	/* 信息提示 */
	.info-text {
		text-align: center;
		margin-bottom: 60rpx;
	}
	
	.info-text text {
		font-size: 24rpx;
		color: #999999;
	}
	
	/* 登录按钮区域 */
	.login-button-section {
		margin-bottom: 60rpx;
	}
	
	.wechat-login-btn {
		width: 100%;
		height: 88rpx;
		background-color: #3CC45F;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		box-shadow: 0 4rpx 12rpx rgba(60, 196, 95, 0.3);
	}
	
	.btn-icon {
		font-size: 32rpx;
		margin-right: 16rpx;
	}
	
	.btn-text {
		font-size: 32rpx;
		color: #ffffff;
		font-weight: bold;
	}
	
	/* 分割线区域 */
	.divider-section {
		position: relative;
		margin-bottom: 40rpx;
	}
	
	.divider-line {
		height: 2rpx;
		background-color: #E5E5E5;
		position: relative;
	}
	
	.divider-text {
		position: absolute;
		top: -20rpx;
		left: 50%;
		/* transform: translateX(-50%); */
		margin-left: -50%;
		background-color: #ffffff;
		padding: 0 20rpx;
		font-size: 24rpx;
		color: #999999;
	}
	
	/* 其他登录方式 */
	.other-login-section {
		display: flex;
		justify-content: center;
		gap: 80rpx;
	}
	
	.other-login-item {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.other-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2rpx solid #E5E5E5;
	}
	
	.phone-icon {
		background-color: #E3F2FD;
		border-color: #2196F3;
	}
	
	.account-icon {
		background-color: #F5F5F5;
		border-color: #CCCCCC;
	}
	
	.phone-symbol,
	.account-symbol {
		font-size: 36rpx;
	}
	
	/* 退出登录弹窗 */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}
	
	.modal-content {
		width: 600rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 60rpx 40rpx 40rpx;
		text-align: center;
	}
	
	.modal-icon {
		width: 100rpx;
		height: 100rpx;
		background-color: #FFEBEE;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 30rpx;
	}
	
	.logout-icon {
		font-size: 50rpx;
		color: #F44336;
	}
	
	.modal-title {
		display: block;
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
	}
	
	.modal-desc {
		display: block;
		font-size: 28rpx;
		color: #666666;
		margin-bottom: 60rpx;
		line-height: 1.5;
	}
	
	.modal-buttons {
		display: flex;
		gap: 20rpx;
	}
	
	.modal-btn {
		flex: 1;
		height: 80rpx;
		border-radius: 40rpx;
		border: none;
		font-size: 32rpx;
	}
	
	.cancel-btn {
		background-color: #F5F5F5;
		color: #666666;
	}
	
	.confirm-btn {
		background-color: #F44336;
		color: #ffffff;
	}
</style>
